<template>
  <div class="cityheader">
    <div class="header-left">
      <router-link to="/">
        <div class="iconfont city-back-icon">
          &#xeb99;
        </div>
      </router-link>
    </div>
    <div class="header-center">
      城市选择
    </div>
    <div class="header-right">

    </div>
  </div>
</template>

<script>
  export default {
    name: "CityHeader"
  }
</script>

<style lang="stylus" scoped>
  @import "~styles/varibles.styl";
  .cityheader {
    overflow hidden
    display: flex
    line-height .86rem
    height: $headerheight
    background-color $bgColor
    color #fff

    .header-left {
      width: 10%;

      .city-back-icon {
        color #fff
        text-align center
        font-size .36rem
      }
    }

    .header-center {
      flex 1
      text-align center
      font-size .32rem

    }

    .header-right {
      width: 10%;
    }
  }
</style>
